<template>
	<view class="container">
		<block v-if="isload">
			<form @submit="formSubmit">
				<view class="mymoney" :style="{background:t('color1')}">
					<view class="f1">mine{{t('Yue Bao')}}income</view>
					<view class="f2"><text style="font-size:26rpx">₹</text>{{userinfo.yuebao_money}}</view>
					<view class="f3" @tap="goto" data-url="yuebaolog?st=1"><text>Withdrawals record</text><text
							class="iconfont iconjiantou" style="font-size:20rpx"></text></view>
				</view>
				<view class="content2">
					<view class="item2">
						<view class="f1">Withdrawal Amount(₹)</view>
					</view>
					<view class="item3">
						<view class="f1">₹</view>
						<view class="f2"><input class="input" type="digit" name="money" value=""
								placeholder="Please enter the withdrawal amount"
								placeholder-style="color:#999;font-size:40rpx" @input="moneyinput" /></view>
					</view>
					<view class="item4" v-if="sysset.yuebao_withdrawfee>0 || sysset.yuebao_withdrawmin>0">
						<text v-if="sysset.yuebao_withdrawmin>0" style="margin-right:10rpx">Minimum withdrawal
							amount{{sysset.yuebao_withdrawmin}}₹ </text>
						<text v-if="sysset.yuebao_withdrawfee>0">Withdrawal fee{{sysset.yuebao_withdrawfee}}% </text>
					</view>
				</view>
				<view class="withdrawtype">
					<view class="f1">Choose a withdrawal method：</view>
					<view class="f2">
						<view class="item" v-if="sysset.withdraw_weixin==1" @tap.stop="changeradio"
							data-paytype="WeChat Wallet">
							<view class="t1">
								<image class="img" src="/static/img/withdraw-weixin.png" />WeChat Wallet
							</view>
							<view class="radio"
								:style="paytype=='WeChat Wallet' ? 'background:'+t('color1')+';border:0' : ''">
								<image class="radio-img" src="/static/img/checkd.png" />
							</view>
						</view>
						<label class="item" v-if="sysset.withdraw_aliaccount==1" @tap.stop="changeradio"
							data-paytype="Alipay">
							<view class="t1">
								<image class="img" src="/static/img/withdraw-alipay.png" />Alipay
							</view>
							<view class="radio" :style="paytype=='Alipay' ? 'background:'+t('color1')+';border:0' : ''">
								<image class="radio-img" src="/static/img/checkd.png" />
							</view>
						</label>
						<label class="item" v-if="sysset.withdraw_bankcard==1" @tap.stop="changeradio"
							data-paytype="Bank card">
							<view class="t1">
								<image class="img" src="/static/img/withdraw-cash.png" />Bank card
							</view>
							<view class="radio"
								:style="paytype=='Bank card' ? 'background:'+t('color1')+';border:0' : ''">
								<image class="radio-img" src="/static/img/checkd.png" />
							</view>
						</label>
					</view>
				</view>
				<button class="opbtn2" v-if="sysset.yuebao_turn_yue=='1'" @tap="tomoney">Go directly to the
					account{{t('balance')}}</button>
				<button class="btn" @tap="formSubmit" :style="{background:t('color1')}">Withdraw now</button>

				<view v-if="paytype=='Alipay'"
					style="width:100%;margin-top:40rpx;text-align:center;color:#999;display:flex;align-items:center;justify-content:center"
					@tap="goto" data-url="/pages/my/setaliaccount">Set up an Alipay account
					<image src="/static/img/arrowright.png" style="width:30rpx;height:30rpx" />
				</view>
				<view v-if="paytype=='Bank card'"
					style="width:100%;margin-top:40rpx;text-align:center;color:#999;display:flex;align-items:center;justify-content:center"
					@tap="goto" data-url="/pages/my/setbankinfo">Set up a Bank card account
					<image src="/static/img/arrowright.png" style="width:30rpx;height:30rpx" />
				</view>
			</form>
			<uni-popup id="dialogInput" ref="dialogInput" type="dialog">
				<uni-popup-dialog mode="input" :title="t('Yue Bao') + 'income transfer' + t('balance')" value=""
					placeholder="Please enter the transfer amount" @confirm="tomonenyconfirm"></uni-popup-dialog>
			</uni-popup>
		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
	var app = getApp();

	export default {
		data() {
			return {
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,

				userinfo: [],
				sysset: false,
				paytype: 'WeChat Wallet',
				show: 0,
				money: 0,
				tmplids: [],

			};
		},

		onShow: function(opt) {
			this.opt = app.getopts(opt);
			this.getdata();
		},
		onPullDownRefresh: function() {
			this.getdata();
		},
		methods: {
			getdata: function() {
				var that = this;
				that.loading = true;
				app.get('ApiMy/yuebao_withdraw', {}, function(res) {
					if (res.status == 1) {
						that.loading = false;
						uni.setNavigationBarTitle({
							title: that.t('Yue Bao') + 'withdraw'
						});
						that.userinfo = res.userinfo;
						that.sysset = res.sysset;
						that.tmplids = res.tmplids;
						var sysset = res.sysset;
						var paytype = 'WeChat Wallet';
						if (sysset.withdraw_weixin == 1) {
							paytype = 'WeChat Wallet';
						}
						if (!sysset.withdraw_weixin || sysset.withdraw_weixin == 0) {
							paytype = 'Alipay';
						}
						if ((!sysset.withdraw_weixin || sysset.withdraw_weixin == 0) && (!sysset
								.withdraw_aliaccount || sysset.withdraw_aliaccount == 0)) {
							paytype = 'Bank card';
						}
						that.paytype = paytype;
						that.loaded();
					} else {
						app.error(res.msg);
					}

				});
			},
			moneyinput: function(e) {
				var usermoney = parseFloat(this.userinfo.yuebao_money);
				var money = parseFloat(e.detail.value);
				if (money < 0) {
					app.error('must be greater than0');
				} else if (money > usermoney) {
					app.error('Can be withdrawn' + this.t('Yue Bao') + 'Insufficient earnings');
				}
				this.money = money;
			},
			changeradio: function(e) {
				var that = this;
				var paytype = e.currentTarget.dataset.paytype;
				that.paytype = paytype;
			},
			formSubmit: function() {
				var that = this;
				var usermoney = parseFloat(this.userinfo.yuebao_money);
				var withdrawmin = parseFloat(this.sysset.yuebao_withdrawmin); //var formdata = e.detail.value;
				var money = parseFloat(that.money);
				var paytype = this.paytype;
				if (isNaN(money) || money <= 0) {
					app.error('Withdrawal amount must be greater than0');
					return;
				}
				if (withdrawmin > 0 && money < withdrawmin) {
					app.error('Withdrawal amount must be greater than₹' + withdrawmin);
					return;
				}
				if (money > usermoney) {
					app.error(this.t('Yue Bao') + 'Insufficient earnings');
					return;
				}
				if (paytype == 'Alipay' && !this.userinfo.aliaccount) {
					app.alert('Please set up an Alipay account first', function() {
						app.goto('/pages/my/setaliaccount');
					});
					return;
				}
				if (paytype == 'Bank card' && (!this.userinfo.bankname || !this.userinfo.bankcarduser || !this.userinfo
						.bankcardnum)) {
					app.alert('Please set complete Bank card information first', function() {
						app.goto('/pages/my/setbankinfo');
					});
					return;
				}
				app.showLoading('submitting');
				app.post('ApiMy/yuebao_withdraw', {
					money: money,
					paytype: paytype
				}, function(res) {
					app.showLoading(false);
					if (res.status == 0) {
						app.error(res.msg);

						return;
					} else {
						app.success(res.msg);
						that.subscribeMessage(function() {
							setTimeout(function() {
								app.goto('yuebaolog?st=1');
							}, 1000);
						});
					}
				});
			},
			tomoney: function() {
				this.$refs.dialogInput.open()
			},
			tomonenyconfirm: function(done, val) {
				console.log(val)
				var that = this;
				var money = val;
				if (money == '' || parseFloat(money) <= 0) {
					app.alert('Please enter the transfer amount');
					return;
				}
				if (parseFloat(money) > this.userinfo.yuebao_money) {
					app.alert('can be transferred in' + that.t('Yue Bao') + 'Insufficient earnings');
					return;
				}
				done();
				app.post('ApiMy/yuebao_turn_money', {
					money: money
				}, function(data) {
					if (data.status == 0) {
						app.error(data.msg);
					} else {
						that.hiddenmodalput = true;
						app.success(data.msg);
						setTimeout(function() {
							that.getdata();
						}, 1000);
					}
				});
			}
		}
	};
</script>
<style>
	.container {
		display: flex;
		flex-direction: column
	}

	.mymoney {
		width: 94%;
		margin: 20rpx 3%;
		border-radius: 10rpx 56rpx 10rpx 10rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		padding: 70rpx 0
	}

	.mymoney .f1 {
		margin: 0 0 0 60rpx;
		color: rgba(255, 255, 255, 0.8);
		font-size: 24rpx;
	}

	.mymoney .f2 {
		margin: 20rpx 0 0 60rpx;
		color: #fff;
		font-size: 64rpx;
		font-weight: bold
	}

	.mymoney .f3 {
		height: 56rpx;
		padding: 0 10rpx 0 20rpx;
		border-radius: 28rpx 0px 0px 28rpx;
		background: rgba(255, 255, 255, 0.2);
		font-size: 20rpx;
		font-weight: bold;
		color: #fff;
		display: flex;
		align-items: center;
		position: absolute;
		top: 94rpx;
		right: 0
	}

	.content2 {
		width: 94%;
		margin: 10rpx 3%;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		background: #fff
	}

	.content2 .item1 {
		display: flex;
		width: 100%;
		border-bottom: 1px solid #F0F0F0;
		padding: 0 30rpx
	}

	.content2 .item1 .f1 {
		flex: 1;
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		height: 120rpx;
		line-height: 120rpx
	}

	.content2 .item1 .f2 {
		color: #FC4343;
		font-size: 44rpx;
		font-weight: bold;
		height: 120rpx;
		line-height: 120rpx
	}

	.content2 .item2 {
		display: flex;
		width: 100%;
		padding: 0 30rpx;
		padding-top: 10rpx
	}

	.content2 .item2 .f1 {
		height: 80rpx;
		line-height: 80rpx;
		color: #999999;
		font-size: 28rpx
	}

	.content2 .item3 {
		display: flex;
		width: 100%;
		padding: 0 30rpx;
		padding-bottom: 20rpx
	}

	.content2 .item3 .f1 {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 60rpx;
		color: #333333;
		font-weight: bold;
		margin-right: 20rpx
	}

	.content2 .item3 .f2 {
		display: flex;
		align-items: center;
		font-size: 60rpx;
		color: #333333;
		font-weight: bold
	}

	.content2 .item3 .f2 .input {
		font-size: 60rpx;
		height: 100rpx;
		line-height: 100rpx;
	}

	.content2 .item4 {
		display: flex;
		width: 94%;
		margin: 0 3%;
		border-top: 1px solid #F0F0F0;
		height: 100rpx;
		line-height: 100rpx;
		color: #8C8C8C;
		font-size: 28rpx
	}

	.withdrawtype {
		width: 94%;
		margin: 20rpx 3%;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		background: #fff
	}

	.withdrawtype .f1 {
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 30rpx;
		color: #333333;
		font-weight: bold
	}


	.withdrawtype .f2 {
		padding: 0 30rpx
	}

	.withdrawtype .f2 .item {
		border-bottom: 1px solid #f5f5f5;
		height: 100rpx;
		display: flex;
		align-items: center
	}

	.withdrawtype .f2 .item:last-child {
		border-bottom: 0
	}

	.withdrawtype .f2 .item .t1 {
		flex: 1;
		display: flex;
		align-items: center;
		color: #333
	}

	.withdrawtype .f2 .item .t1 .img {
		width: 44rpx;
		height: 44rpx;
		margin-right: 40rpx
	}

	.withdrawtype .f2 .item .radio {
		flex-shrink: 0;
		width: 36rpx;
		height: 36rpx;
		background: #FFFFFF;
		border: 3rpx solid #BFBFBF;
		border-radius: 50%;
		margin-right: 10rpx
	}

	.withdrawtype .f2 .item .radio .radio-img {
		width: 100%;
		height: 100%
	}

	.btn {
		height: 100rpx;
		line-height: 100rpx;
		width: 90%;
		margin: 0 auto;
		border-radius: 50rpx;
		margin-top: 30rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
	}

	.opbtn2 {
		width: 90%;
		margin: 0 5%;
		margin-top: 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		border: 1px solid #eee;
		background: #fff;
		margin-bottom: 20rpx;
	}
</style>
